<template>
	<view class="uni-input-wrapper">
		<u-input type="select" :border="false" :placeholder="placeholder" v-model="dataValue" :disabled="true" @click="show = true" clearable></u-input>
		<u-picker :mode="mode" :defaultTime="dataValue" v-model="show" :params="params" :end-year="endYear" @confirm="dateTimeChange"></u-picker>
	</view>
</template>

<script>
export default {
	props: {
		/** 值 */
		value: {
			type: [String, Number],
			default: '',
		},
		/** 索引值 用于更新数据 */
		index: Number,
		/** 包含数据源 */
		item: Object,
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	components: {},
	data() {
		return {
			dataValue: '',
			mode: 'time',
			show: false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false,
				province: true,
				city: true,
				area: true,
				timestamp: true,
			},
		};
	},
	computed: {
		endYear() {
			return new Date().getFullYear() + 100;
		},
		placeholder() {
			if (this.item.data.formType.indexOf('date') != -1) {
				return '请选择时间';
			}
			return '请选择';
		},
	},
	watch: {
		value: function (val) {
			this.dataValue = val;
		},
	},
	created() {
		this.dataValue = this.value;
		if (this.item.data.formType == 'datetime') {
			this.params.hour = true;
			this.params.minute = true;
			this.params.second = true;
		}
	},
	methods: {
		dateTimeChange(value) {
			if (this.item.data.formType == 'datetime') {
				this.dataValue = this.$u.timeFormat(value.timestamp, 'yyyy-mm-dd hh:MM:ss');
			} else {
				this.dataValue = this.$u.timeFormat(value.timestamp, 'yyyy-mm-dd');
			}

			let data = {
				index: this.index,
				fieldName: this.item.data.fieldName,
				value: this.dataValue,
			};
			this.$emit('value-change', data);
		},
	},
};
</script>

<style>
.xh-view {
	width: 100%;
}
</style>
